<template>
    
    <div class="default-main">
        <div class="small-panel-box">
            <el-card shadow="hover" class="info_card">
                <div>当前时间：{{timeString}}</div>
            </el-card>
            <el-row :gutter="20">
                <el-col :sm="12" :lg="6">
                    <div class="small-panel user-reg suspension">
                        <div class="small-panel-title">注册用户数</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#8595F4" size="20" name="fa fa-line-chart" />
                                <span id="user_reg_number">5456</span>
                            </div>
                            <div class="content-right">+14%</div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <div class="small-panel file suspension">
                        <div class="small-panel-title">访问数量</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#AD85F4" size="20" name="fa fa-file-text" />
                                <span id="file_number">1234</span>
                            </div>
                            <div class="content-right">+50%</div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <div class="small-panel users suspension">
                        <div class="small-panel-title">产品总数</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#74A8B5" size="20" name="fa fa-users" />
                                <span id="users_number">9486</span>
                            </div>
                            <div class="content-right">+28%</div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <div class="small-panel addons suspension">
                        <div class="small-panel-title">订单总数</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#F48595" size="20" name="fa fa-object-group" />
                                <span id="addons_number">875</span>
                            </div>
                            <div class="content-right">+88%</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <!-- 折线图卡片card -->
            <el-card shadow="hover">
                <template #header>登录次数</template>
                <div style="height: 280px;" id="lineChar"></div>
            </el-card>
            <div class="graph">
                <!-- graph图卡片card -->
                <el-card shadow="hover">
                    <template #header>产品分类</template>
                    <div style="height: 300px;" id="treeChar"></div>
                </el-card>
                <el-card shadow="hover">
                    <template #header>订单状态</template>
                    <div style="height: 300px;" id="radarChar"></div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted,onUnmounted } from 'vue'
import * as echarts from "echarts";

// 获取当前时间
const timeString = ref('')

const time = ()=>{
    // 获取当前时间
    const currentTime = new Date();
    // 格式化年份、月份、日期、小时、分钟和秒数，确保单个数字前面有零
    const year = currentTime.getFullYear();
    const month = ('0' + (currentTime.getMonth() + 1)).slice(-2);
    const date = ('0' + currentTime.getDate()).slice(-2);
    const hours = ('0' + currentTime.getHours()).slice(-2);
    const minutes = ('0' + currentTime.getMinutes()).slice(-2);
    const seconds = ('0' + currentTime.getSeconds()).slice(-2);
    // 将时间格式转换为带有连字符的形式
    timeString.value = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}

const lineOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
}

const treeOption = {
    grid: {
    left: "2%",
    right: "2%",
    bottom: "10%",
    containLabel: true,
  },
  legend: {
    top: "bottom",
    textStyle: {
      color: "#999",
    },
  },
  series: [
    {
      name: "Nightingale Chart",
      type: "pie",
      radius: [50, 130],
      center: ["50%", "50%"],
      roseType: "area",
      itemStyle: {
        borderRadius: 1,
        color: function (params) {
          //自定义颜色
          const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
          return colorList[params.dataIndex];
        },
      },
      data: [
        { value: 26, name: "家用电器" },
        { value: 27, name: "户外运动" },
        { value: 24, name: "汽车用品" },
        { value: 23, name: "手机数码" },
      ],
    },
  ],
};

const radarOption = {
  grid: {
    left: "2%",
    right: "2%",
    bottom: "10%",
    containLabel: true,
  },
  legend: {
    x: "center",
    y: "bottom",
    data: ["预定数量", "下单数量", "发货数量"],
    textStyle: {
      color: "#999",
    },
  },
  radar: {
    radius: "60%",
    indicator: [
      { name: "家用电器" },
      { name: "服装箱包" },
      { name: "运动户外" },
      { name: "手机数码" },
      { name: "汽车用品" },
      { name: "家具厨具" },
    ],
  },
  series: [
    {
      name: "Budget vs spending",
      type: "radar",
      itemStyle: {
        borderRadius: 6,
        color: function (params) {
          //自定义颜色
          const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
          return colorList[params.dataIndex];
        },
      },
      data: [
        {
          value: [400, 400, 400, 400, 400, 400],
          name: "预定数量",
        },
        {
          value: [300, 300, 300, 300, 300, 300],
          name: "下单数量",
        },
        {
          value: [200, 200, 200, 200, 200, 200],
          name: "发货数量",
        },
      ],
    },
  ],
};

const initEchars = ()=>{
    var lineChar = echarts.init(document.getElementById('lineChar'));
    lineChar.setOption(lineOption);
    var treeChar = echarts.init(document.getElementById('treeChar'));
    treeChar.setOption(treeOption);
    var radarChar = echarts.init(document.getElementById('radarChar'));
    radarChar.setOption(radarOption);
}

// 创建定时器
let intervalId;
onMounted(()=>{
    initEchars();
    intervalId = setInterval(() =>{
        // 更新时间显示
        time()
    }, 1000);
})
// 在组件卸载时清除定时器，防止内存泄漏
onUnmounted(() => {
    clearInterval(intervalId);
});
</script>

<style scoped lang="scss">
.small-panel-box {
    margin-top: 20px;
    .info_card{
        margin-bottom: 20px;
    }
    .small-panel {
        background-color: #e9edf2;
        border-radius: var(--el-border-radius-base);
        padding: 25px;
        margin-bottom: 20px;
        .small-panel-title {
            color: #92969a;
            font-size: 15px;
        }
        .small-panel-content {
            display: flex;
            align-items: flex-end;
            margin-top: 20px;
            color: #2c3f5d;
            .content-left {
                font-size: 24px;
                .icon {
                    margin-right: 10px;
                }
                span {
                    display: inline-block;
                    font-size: 28px;
                }
            }
            .content-right {
                font-size: 18px;
                margin-left: auto;
            }
            .color-success {
                color: var(--el-color-success);
            }
            .color-warning {
                color: var(--el-color-warning);
            }
            .color-danger {
                color: var(--el-color-danger);
            }
            .color-info {
                color: var(--el-text-color-secondary);
            }
        }
    }
    .graph{
        display: flex;
        // justify设置排列方式
        justify-content: space-between;
        .el-card{
            width: 49%;
            margin-top: 20px;
        }
    }
}

</style>
